<script setup>
/**
 * 设置模块
 * 在左侧消息按钮点击后显示
 */
import { showMessage } from '@/utils/elementUtil.js'
import { ref } from 'vue'
import SelfSet from '@/views/LeftSetBar/set/SelfSet.vue'
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'
import router from '@/router/index.js'

const userInfoStore = useUserInfoStore()

const index = ref(0)
const logout = () => {
    userInfoStore.setUserInfo({})
    localStorage.setItem('token', '')
    router.push('/login')
    showMessage('退出登录成功', 'success')
}

const onClick = (number) => {
    if (number === -1) {
        showMessage('开发中，暂时无法使用', 'error')
    }else{
        index.value = number
    }
}
const back = () => {
    index.value = 0
}
</script>

<template>
    <div style="position: relative; height: 100%; width: 100%">
        <div v-if="index === 0">
            <div style="text-align: center; font-size: 20px">设置</div>
            <!--   根据不同的数字显示页面         -->
            <div @click="onClick(-1)"><span>账号与账号安全</span></div>
            <div @click="onClick(-1)"><span>消息通知</span></div>
            <div @click="onClick(3)"><span>个人设置(可用)</span></div>
            <div @click="onClick(-1)"><span>联系人权限</span></div>
            <div @click="onClick(-1)"><span>个人信息与权限</span></div>
            <div @click="onClick(-1)"><span>第三方信息共享清单</span></div>
            <div @click="onClick(-1)"><span>关于</span></div>
            <div @click="onClick(-1)"><span>帮助</span></div>
            <div @click="onClick(-1)"><span>我的企业</span></div>
            <div @click="router.push('/test')"><span>测试(可用)</span></div>
            <button @click="logout()" class="bottomBtn">退出登录</button>
        </div>
        <div v-if="index === 3">
            <SelfSet @back="back" />
        </div>
    </div>
</template>

<style scoped>
span {
    position: relative;
    left: 10px;
}

div{
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid var(--el-border-color);
    cursor: pointer;
}

.bottomBtn {
    position: absolute;
    width: 80%;
    left: 10%;
    height: 40px;
    bottom: 24px;
    border: none;
    background-color: rgb(248, 152.1, 152.1);
    color: white;
    cursor: pointer;
    border-radius: 2px;
}

.bottomBtn:hover {
    background-color: rgb(255, 99, 71);
}
</style>
